<template>
  <div class="sendmessage-component">
    <div class="tabs-box">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="下发信息">
          <a-form>
            <a-form-item>
              <a-select
                show-search
                placeholder="请选择下发内容"
                option-filter-prop="children"
                :filter-option="filterOption"
              >
                <a-select-option key="0" value="0">
                  请勿违规驾驶，谢谢
                </a-select-option>
                <a-select-option key="1" value="1">
                  注意前方路况并和前方车辆保持安全距离，保持安全车速行驶。
                </a-select-option>
                <a-select-option key="2" value="2">
                  请勿遮挡摄像头，谢谢。
                </a-select-option>
                <a-select-option key="3" value="3">
                  车距过近，请降低车速
                </a-select-option>
              </a-select>
              <!-- <a-select placeholder="请选择下发内容">
                <a-select-option key="0" value="0">
                  请勿违规驾驶，谢谢
                </a-select-option>
                <a-select-option key="1" value="1">
                  注意前方路况并和前方车辆保持安全距离，保持安全车速行驶。
                </a-select-option>
                <a-select-option key="2" value="2">
                  请勿遮挡摄像头，谢谢。
                </a-select-option>
                <a-select-option key="3" value="3">
                  车距过近，请降低车速
                </a-select-option>
              </a-select> -->
            </a-form-item>
          </a-form>
          <div class="button-group">
            <a-button type="primary">
              发送
            </a-button>
            <a-button
              @click="$emit('close')"
            >
              取消
            </a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="下发记录" force-render>
          <wx-table
            ref="table"
            size="default"
            :hiddenSearch="true"
            :hidenOpt="true"
            :pagination="false"
            :rowKey="(record, index) => index"
            :columns="columns"
            :data="loadData"
            style="flex: 1; height: 0; overflow-y: auto;"
          >
          </wx-table>
          <div class="button-group">
            <a-button type="primary">
              发送
            </a-button>
            <a-button>
              取消
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { WxTable } from '@/components'
export default {
  data () {
    return {
      columns: [
        {
          title: '内容',
          dataIndex: 'content'
        },
        {
          title: '时间',
          dataIndex: 'time'
        }
      ],
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return new Promise((resolve, reject) => {
          const retData = {
            code: 200,
            message: '操作成功',
            data: {
              amount: 2,
              list: [
                {
                  id: 1,
                  content: '请勿疲劳驾驶，注意休息',
                  time: '11-27 09:16:27'
                },
                {
                  id: 1,
                  content: '请勿疲劳驾驶，注意休息',
                  time: '11-27 09:16:27'
                },
                {
                  id: 1,
                  content: '请勿疲劳驾驶，注意休息',
                  time: '11-27 09:16:27'
                },
                {
                  id: 1,
                  content: '请勿疲劳驾驶，注意休息',
                  time: '11-27 09:16:27'
                }
              ]
            }
          }
          resolve(retData)
        })
      }
    }
  },
  components: {
    WxTable
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./SendmessageComponent.less');
// /deep/ .ant-tabs {
//   height: 100% !important;
//   display: flex !important;
//   flex-direction: column !important;
//   /deep/ .ant-tabs-content {
//     flex: 1 !important;
//     height: 0 !important;
//   }
// }
</style>
